<template>
    <div class="swiper-body">
    <swiper  ref="mySwiper">
        <!-- slides -->
        <swiper-slide v-for="item of swiperList" :key="item.id">
            <img class="swiper-img" :src="item.imgUrl"/>
        </swiper-slide>
        
        
        <!-- Optional controls -->
        <!-- 分页的内容 -->
        <div class="swiper-pagination"  slot="pagination"></div>
    
    </swiper>
  </div>
</template>
<script>
 export default {
    name: 'carrousel',
    props:{
      swiperList:Array
    },
    data() {
      return {
       
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    mounted() {
      // current swiper instance
      // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
      console.log('this is current swiper instance object', this.swiper)
      this.swiper.slideTo(3, 1000, false)
    }
   
  }
</script>
//  .swiper-body >>> .swiper-pagination-bullet-active
        background:red !important   使用穿透性使得当前组件的子组件swiper的样式发生改变
<style lang="stylus" scoped>    
    .swiper-body >>> .swiper-pagination-bullet-active
        background:red !important
    .swiper-body
        overflow :hidden
        width:100%
        height:0
        padding-bottom :26.7%
        .swiper-img
            width:100%

</style>